<template>
  <PageWrapper title="提成结算">
    <div id="commission">
      <a-card>
        <div class="ant-basic-table">
          <a-table
            class="ant-table-striped"
            :columns="columns"
            :data-source="dataSource"
            bordered
            :pagination="{ position: ['bottomLeft'] }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'remark'">
                <a-image
                  :width="80"
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                />
              </template>
            </template>
          </a-table>
        </div>
      </a-card>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page'

  import { ref } from 'vue'

  const columns = ref([
    {
      title: '月份',
      dataIndex: 'date',
      key: 'date',
      width: '80',
    },
    {
      title: '合伙人姓名',
      dataIndex: 'contact',
      key: 'contact',
    },

    {
      title: '提成(%)',
      dataIndex: 'software',
      key: 'software',

    },
    {
      title: '提成金额',
      dataIndex: 'software',
      key: 'software',
  
    },
    {
      title: '付款日期',
      dataIndex: 'software',
      key: 'software',

    },
    {
      title: '单据',
      dataIndex: 'remark',
      key: 'remark',
    },
  ])
  const dataSource = ref([
    {
      key: 1,
      date: '',
      contact: '章三',
      tel: '1232434',
      home: true,
      software: false,
      address: '',
      idea: '我的建议',
      remark: '',
    },
    {
      key: 2,
      date: '',
      contact: '力三',
      tel: '1232434',
      home: '',
      software: true,
      address: '',
      idea: '我的建议',
      remark: '',
    },
  ])
</script>
<style scoped lang="less">
  #commission {
    a {
      color: #333;
    }
    .btn-group {
      display: flex;
      justify-content: end;
      margin-top: 20px;
    }
  }
</style>
